<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			
			.lb {
				width: 320px;
				height: 480px;
				position: relative;
				overflow: hidden;
			}
			
			.lb .lb_img {
				width: 2560px;
				height: 480px;
				position: absolute;
				left: -320px;
			}
			
			.lb .lb_img li {
				width: 320px;
				height: 480px;
				float: left;
				display: block;
			}
			.lb .lb_img li img{
				width: 100%;
				height: 100%;
			}
			
		</style>
	</head>

	<body>
		<div class="lb">
			<ul class="lb_img">
				<li><img src="img/6.png"></li>
				<li><img src="img/1.png"></li>
				<li><img src="img/2.png"></li>
				<li><img src="img/3.png"></li>
				<li><img src="img/4.png"></li>
				<li><img src="img/5.png"></li>
				<li><img src="img/6.png"></li>
				<li><img src="img/1.png"></li>
			</ul>
		</div>
		<script>
			var lb = document.querySelector(".lb");
			var lb_img = document.querySelector(".lb .lb_img");
			var img = document.querySelectorAll(".lb .lb_img li")
			var lis = document.querySelectorAll(".lb ul li");
			var i = 2;
			// 初始化手指坐标点
			var startPoint = 0;
			var startEle = 0;
			//手指按下
			lb.addEventListener("touchstart", function(e) {
				startPoint = e.changedTouches[0].pageX;
				startEle = lb_img.offsetLeft;
				clearInterval(Time)
			});

			//手指滑动
			lb.addEventListener("touchmove", function(e) {
				var currPoint = e.changedTouches[0].pageX;
				var disX = currPoint - startPoint;
				var left = startEle + disX;
				lb_img.style.left = left + "px";
			});
			//当手指抬起的时候，
			lb.addEventListener("touchend", function(e) {
				var currPoint = e.changedTouches[0].pageX;
				var disX = -(currPoint - startPoint);
				var left = startEle + disX;
				if(disX > 150) {
					i++;
					for(var q = 0; q < lis.length; q++) {
						lis[q].className = '';
					}
					if(i == 8) {
						i = 2;
					}
					lis[i - 2].className = "active";
					lb_img.style.left = -320 * (Math.round(disX / 320) + i + 1) + 'px';
				} else {
					lb_img.style.left = -320 * (i - 1) + "px";
				}
				if(disX < -150) {
					i--;
					for(var q = 0; q < lis.length; q++) {
						lis[q].className = '';
					}
					if(i == 1) {
						i = 7;
					}
					lis[i - 2].className = "active";
					lb_img.style.left = -320 * (Math.round(-disX / 320) + i - 2) + 'px';

				} else {
					lb_img.style.left = -320 * (i - 1) + "px";
				}
				Time = setInterval(autoplay, 2000);
			})
			//设置定时器
			Time = setInterval(autoplay, 4000);

			function autoplay() {
				i++;
				for(var q = 0; q < lis.length; q++) {
					lis[q].className = '';
				}
				if(i == 8) {
					i = 2;
				}
				lis[i - 2].className = "active";
				for(var a = 0; a < 320; a++) {
					setTimeout(function() {
						var left = lb_img.style.left ? lb_img.style.left : "-320px";
						left = parseInt(left) - 1;
						if(left < -2240) {
							left = -321;
						}
						lb_img.style.left = left + "px";
					}, a);
				}
			}
		</script>
	</body>

</html>